// MEDIA QUERIES MIXINS
// For the following mixins you can pass ipad, iphone, desktop, desktop-large, ipad-portrait, ipad-landscape, 
// iphone-portrait, iphone-landscape or retina-display as arguments to the $device variable.

// Screen size variables
$iphone-portrait: 320px
$iphone-landscape: 480px
$ipad-portrait: 768px
$ipad-landscape: 980px
$desktop: 1224px
$desktop-large: 1824px

// Hides the element only in the device you choose
= hide-on($device)
  +respond-to($device)
    display: none

= hide-below($device)
  +apply-to(less-than, $device)
    display: none

= hide-above($device)
  +apply-to(more-than, $device)
    display: none

// Shows the element only in the device you choose
= show-on($device)
  +apply-to(not-on, $device)
    display: none


// The mixins below were inspired from here: https://gist.github.com/3931614 and a bit modified
// Specific device targeting
// Use: Only use if you want the style to respond to one device
// Example:
//     +respond_to(ipad-landscape)
// will apply CSS only to an iPad at landscape rotation
= respond-to($device)

  @if $device == retina-display
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5)
      @content

  @if $device == iphone
    @media only screen and (min-width: $iphone-portrait) and (max-width: $iphone-landscape)
      @content

  @if $device == iphone-landscape
    @media only screen and (min-width: $iphone-portrait) and (max-width: $iphone-landscape) and (orientation: landscape)
      @content

  @if $device == iphone-portrait
    @media only screen and (max-width: $iphone-portrait) and (max-width: $iphone-landscape) and (orientation: portrait)
      @content

  @if $device == ipad
    @media only screen and (min-width: $ipad-portrait) and (max-width: $ipad-landscape)
      @content

  @if $device == ipad-landscape
    @media only screen and (min-width: $ipad-portrait) and (max-width: $ipad-landscape) and (orientation: landscape)
      @content

  @if $device == ipad-portrait
    @media only screen and (max-width: $ipad-portrait) and (max-width: $ipad-landscape) and (orientation: portrait)
      @content

  @if $device == desktop
    @media only screen and (min-width: $desktop) and (max-width: $desktop-large)
      @content

  @if $device == desktop-large
    @media only screen and (min-width: $desktop-large)
      @content

// General device targeting
// Use: Only use if you want the style to apply to many devices
// Example:
//     +apply-to(smaller-than, iphone-portrait)
// will apply CSS to anything smaller than an iphone-portrait
// Example 2:
//     +apply-to(not-on, retina-display)
// will apply CSS to anything but retina-display devices
= apply-to($filter, $device)
  
  $extrema: null
  @if $filter == less-than
    $extrema: max
  @if $filter == more-than
    $extrema: min

  @if $filter != not-on
    @if $device == iphone-landscape
      @media only screen and (#{$extrema}-width: $iphone-landscape)
        @content

    @if $device == iphone-portrait
      @media only screen and (#{$extrema}-width: $iphone-portrait)
        @content

    @if $device == ipad-landscape
      @media only screen and (#{$extrema}-width: $ipad-landscape)
        @content

    @if $device == ipad-portrait
      @media only screen and (#{$extrema}-width: $ipad-portrait)
        @content

    @if $device == desktop
      @media only screen and (#{$extrema}-width: $desktop)
        @content

    @if $device == desktop-large
      @media only screen and (#{$extrema}-width: $desktop-large)
        @content
  @else
    @if $device == retina-display
      @media only screen and (-webkit-max-device-pixel-ratio: 1.1), (max--moz-device-pixel-ratio: 1.1), (-o-max-device-pixel-ratio: 1.1), (max-device-pixel-ratio: 1.1)
        @content

    @if $device == iphone
      @media only screen and (max-width: $iphone-portrait - 1), (min-width: $iphone-landscape + 1)
        @content

    @if $device == iphone-landscape
      @media only screen and (max-width: $iphone-landscape - 1), (min-width: $iphone-landscape + 1)
        @content

    @if $device == iphone-portrait
      @media only screen and (max-width: $iphone-portrait - 1), (min-width: $iphone-portrait + 1)
        @content

    @if $device == ipad
      @media only screen and (max-width: $ipad-portrait - 1), (min-width: $ipad-landscape + 1)
        @content

    @if $device == ipad-landscape
      @media only screen and (max-width: $ipad-landscape - 1), (min-width: $ipad-landscape + 1)
        @content

    @if $device == ipad-portrait
      @media only screen and (max-width: $ipad-portrait - 1), (min-width: $ipad-portrait + 1)
        @content

    @if $device == desktop
      @media only screen and (max-width: $desktop - 1) and (min-width: $desktop-large)
        @content

    @if $device == desktop-large
      @media only screen and (max-width: $desktop-large - 1)
        @content